<template>
  <div>
    <template v-for="(item, index) in comments">
      <div class="c-flex-row c-bd-b1-f5 c-pv30 c-w100" v-if="item.isShow != -1" :key="index">
        <div class="c-ww64 c-hh64 c-flex-shrink0" @click.stop="handleClickCircleIndex(item)">
          <img class="c-ww64 c-hh64 imgCloseBig c-brp50" :src="$addXossFilter(item.headimgurl, require('@/assets/defult_head.png'))" alt="">
        </div>
        <div class="c-pl12 c-flex-grow1" @click="operationComment(item, item.commentId, index)">
          <p class="c-flex-row c-aligni-center">
            <span class="c-fc-sblue c-fs22 c-mr16" @click.stop="handleClickCircleIndex(item)">{{item.nickname}}</span>
            <img v-if="item.isMaster" class="c-ww80" :src="require('@/assets/i/wap/circle/circle_m.png')">
            <span v-if="item.isAuthor && item.isMaster == false" class="c-fc-orange c-fs20 c-lh24 c-pv4 bg c-ph4 c-br4">作者</span>
            <!-- 只展示最高身份，是圈主就不展示作者身份 -->
          </p>
          <p class="c-fc-sgray c-fs22 c-lh32">{{item.createdAt}}</p>
          <p class="c-mt16 c-fc-xblack c-fs24 c-lh34 c-ww-bw" v-html="openlink(item.content)" @click="handleClickOpenLink($event)"></p>
          <template v-if="item.resource">
            <!-- 图片 -->
            <div v-if="item.resource.imgArr && item.resource.imgArr.length > 0" class="c-w100 c-flex-row c-flexw-wrap c-mt20">
              <div class="c-ww166 c-hh166" :class="[(imgIndex + 1) % 3 == 0 ? '' : 'c-mr8', (imgIndex + 1) <= 3 ? '' : 'c-mt8']" v-for="(imgItem, imgIndex) in item.resource.imgArr" :key="imgIndex">
                <img :src="$addXossFilter(imgItem)" @click.stop="clickPreviewImage(imgItem, item.resource.imgArr, imgIndex)" class="c-w100 c-h c-object-fit-cover c-br10" alt="">
              </div>
            </div>
            <!-- 音频 -->
            <div class="c-flex-row c-aligni-center c-w100 c-mt20" v-if="item.resource.audioArr">
              <div :style="'width:' + (item.resource.audioArr.audioTime * 1.5 + 150) + 'px;'"
                class="c-maxw440 c-flex-1 c-flex-row c-aligni-center c-justify-sb c-br30 c-pv6 c-pr20 c-pl6 theme-bg-10 theme-fc"
                @click.stop="clickPlayAudio(item.resource.audioArr.content, item.resource.audioArr.audioTime)">
                <!-- <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != item.resource.audioArr.content" :src="require('@/assets/i/wap/course/chat_right_play.png')" alt="" />
                <img class="c-ww30 c-hh30 c-rotate180" v-else :src="require('@/assets/i/wap/course/chat_right_play.gif')" alt="" />
                <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div> -->
                <div class="c-bg-white c-ww48 c-hh48 c-br50 c-flex-row c-justify-center c-aligni-center">
                  <span class="iconfont c-fs22">{{playAduioSrc != item.resource.audioArr.content ? '&#xe6dd;':'&#xe6de;'}}</span>
                </div>
                <div v-if="playAduioSrc == item.resource.audioArr.content" class="audio-play-anim c-flex-row c-justify-center c-aligni-center">
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                  <div class="item theme-bg"></div>
                </div>
                <span class="c-fs22 theme-fc">{{item.resource.audioArr.audioTime}}"</span>
              </div>
            </div>
            <!-- 视频 -->
            <div class="c-flex-row c-aligni-center c-mt20 c-w100" v-if="item.resource.videoArr != null">
              <div @click.stop="clickShowVideo(item.resource.videoArr.content)" class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center">
                <i class="iconfont c-pa c-fs40" v-if="item.resource.videoArr.videoLogo != ''">&#xe869;</i>
                <img class="c-w100 c-h c-br8 c-object-fit-cover"
                  v-lazy="$addXossFilter(item.resource.videoArr.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="">
              </div>
            </div>
          </template>
          <div class="c-bg-sgray c-ph20 c-pv20 c-fc-sblack c-fs24 c-lh34 c-mt20"
            v-if="item.replyList && item.replyList.length > 0 && itemReplyList(item.replyList, item.isTotalShow) && itemReplyList(item.replyList, item.isTotalShow).length > 0">
            <div v-for="(cItem, i) in itemReplyList(item.replyList, item.isTotalShow)" :key="i" :class="i != 0 ? 'c-mt20' : ''" @click.stop="operationComment(cItem, item.commentId, index)">
              <p v-if="cItem.deleteStatus != -1">
                <span class="c-fc-sblue" @click.stop="handleClickCircleIndex(cItem)">{{cItem.nickname}}</span>
                <span v-if="cItem.parentId != item.commentId"> 回复 <span class="c-fc-sblue" @click.stop="handleClickCircleIndex(cItem)">{{cItem.replyName}}</span></span>: <span class="c-ww-bw" v-html="openlink(cItem.content)" @click="handleClickOpenLink($event)"></span>
              </p>
              <template v-if="cItem.resource">
                <!-- 图片 -->
                <div v-if="cItem.resource.imgArr && cItem.resource.imgArr.length > 0" class="c-w100 c-flex-row c-flexw-wrap c-mt20">
                  <div class="c-ww152 c-hh152" :class="[(imgIndex + 1) % 3 == 0 ? '' : 'c-mr8', (imgIndex + 1) <= 3 ? '' : 'c-mt8']" v-for="(imgItem, imgIndex) in cItem.resource.imgArr"
                    :key="imgIndex">
                    <img :src="$addXossFilter(imgItem)" @click.stop="clickPreviewImage(imgItem, cItem.resource.imgArr, imgIndex)" class="c-w100 c-h c-object-fit-cover c-br10" alt="">
                  </div>
                </div>
                <!-- 音频 -->
                <div class="c-flex-row c-aligni-center c-w100 c-mt20" v-if="cItem.resource.audioArr">
                  <div :style="'width:' + (cItem.resource.audioArr.audioTime * 1.5 + 150) + 'px;'"
                    class="c-maxw440 c-flex-1 c-flex-row c-aligni-center c-justify-sb c-br30 c-pv6 c-pr20 c-pl6 theme-bg-10 theme-fc"
                    @click.stop="clickPlayAudio(cItem.resource.audioArr.content, cItem.resource.audioArr.audioTime)">
                    <!-- <img class="c-ww30 c-hh30 c-rotate180" v-if="playAduioSrc != cItem.resource.audioArr.content" :src="require('@/assets/i/wap/course/chat_right_play.png')" alt="" />
                    <img class="c-ww30 c-hh30 c-rotate180" v-else :src="require('@/assets/i/wap/course/chat_right_play.gif')" alt="" />
                    <div class="c-flex-row c-flex-center c-flex-1 c-fs24">点击播放</div> -->
                    <div class="c-bg-white c-ww48 c-hh48 c-br50 c-flex-row c-justify-center c-aligni-center">
                      <span class="iconfont c-fs22">{{playAduioSrc != cItem.resource.audioArr.content ? '&#xe6dd;':'&#xe6de;'}}</span>
                    </div>
                    <div v-if="playAduioSrc == cItem.resource.audioArr.content" class="audio-play-anim c-flex-row c-justify-center c-aligni-center">
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                      <div class="item theme-bg"></div>
                    </div>
                    <span class="c-fs22 theme-fc">{{cItem.resource.audioArr.audioTime}}"</span>
                  </div>
                </div>
                <!-- 视频 -->
                <div class="c-flex-row c-aligni-center c-mt20 c-w100" v-if="cItem.resource.videoArr != null">
                  <div @click.stop="clickShowVideo(cItem.resource.videoArr.content)" class="c-p c-ww320 c-hh180 c-fc-white c-flex-row c-flex-center">
                    <i class="iconfont c-pa c-fs40" v-if="cItem.resource.videoArr.videoLogo != ''">&#xe869;</i>
                    <img class="c-w100 c-h c-br8 c-object-fit-cover"
                      v-lazy="$addXossFilter(cItem.resource.videoArr.videoLogo, 'https://kposshzcdn.ckjr001.com/admin/material/9_material_admin/image/assets/i/wap/clockIn/video-bg1.png')" alt="">
                  </div>
                </div>
              </template>
            </div>
            <div class="c-fc-smblue c-fs24 c-lh34 c-mt20" @click.stop="loadMoreComments(index)"
              v-if="item.isTotalShow == false && (item.replyList.filter(cItem => cItem.deleteStatus != -1).length > 3)">展开 {{item.replyList.filter(cItem => cItem.deleteStatus != -1).length- 3}} 条回复
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { utilJs, wxUtilJs } from "@/utils/common.js";
export default {
  name: 'circleComment',
  components: {
  },
  props: {
    comments: { // 评论
      type: Array,
      default: () => {
        return []
      }
    },
    playAduioSrc: { // 音频播放地址
      type: String,
      default: ''
    },
    progress: { // 音频播放进度
      type: Number,
      default: 0
    },
  },
  data() {
    return {
    }
  },
  computed: {
    itemReplyList() {
      return function (list, isTotalShow) {
        let filterList = list.filter(item => (item.deleteStatus != -1 && item.isShow != -1));
        console.log(filterList)
        filterList = filterList.filter((item, index) => (isTotalShow ? index >= 0 : index < 3));
        return filterList;
      }
    },
    openlink() {
      return function (text) {
        /* eslint-disable */
        let titleReg = new RegExp('\n', "g");
        let title = text.replace(titleReg, "<br>");
        if (!title) {
          return '';
        }
        if (title.length) {
          let reg = /(https?|ftp|file)(:\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|])/g;
          title = title.replace(reg, function (txt) {
            return `<span class="theme-fc link">${txt}</span>`
          })
        }
        return title;
      }
    },
  },
  methods: {
    handleClickOpenLink(event) {
      if (event.target.className.includes('link')) {
        event.stopPropagation();
        let href = event.target.outerText;
        utilJs.locationHref(href);
        return;
      }
    },
    handleClickCircleIndex(item) {
      this.$emit("handleClickCircleIndex", item)
    },
    // 操作评论
    operationComment(item, rootCId, index) {
      item.rootCId = rootCId;
      this.$emit('getCommentOperation', item);
    },
    // 展示评论加载更多
    loadMoreComments(index) {
      this.$emit('loadMoreComments', index)
    },
    // 点击图片放大预览
    clickPreviewImage(imgUrl, imgArr, imgIndex) {
      if (!imgUrl) {
        return;
      }
      let imgUrlList = [];
      imgArr = imgArr.filter(item => {
        return item != 'uploadQaImg'
      })
      for (let key of imgArr) {
        if (key) {
          imgUrlList.push(key);
        }
      }
      wxUtilJs.previewImage({
        current: imgUrl, // 当前显示图片的http链接
        urls: imgUrlList // 需要预览的图片http链接列表
      });
      // this.$previewImg({
      //   activeIndex: imgIndex,
      //   imgList: imgUrlList
      // })
    },
    // 点击播放音频
    clickPlayAudio(audioUrl, audioTime) {
      this.$emit('clickPlayAudio', audioUrl, audioTime);
    },
    // 点击播放视频
    clickShowVideo(videoSrc) {
      this.$emit('clickShowVideo', videoSrc);
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.feedList.length > 0) {
          this.getFeedsList(this.typeBar);
        }
      });
    },
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../../../assets/css/scss/circle.scss";
.c-hh166 {
  height: 4.15rem;
}
.audio_start {
  background: rgba(33, 148, 255, 0.1);
}
.circle_progress {
  position: relative;
  height: 0.1rem;
  margin: 0 0.5rem 0 0.8rem;
  border-radius: 0.1rem;
  background: #fff;
  .circle_progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    max-width: 100%;
    height: 0.1rem;
    border-radius: 0.1rem;
    text-align: right;
    // transition: all 1s linear;
    // -webkit-transition: all 1s linear;
    background: #2194ff;
    .circle_round {
      display: inline-block;
      position: relative;
      top: -0.6rem;
      width: 0.5rem;
      height: 0.5rem;
      border: 0.1rem solid #2194ff;
      border-radius: 50%;
      background: #fff;
    }
    .circle_round1 {
      top: -0.3rem;
    }
  }
}
.c-ww152 {
  width: 3.8rem;
}
.c-hh152 {
  height: 3.8rem;
}
.bg {
  background: #fff1e5;
}
</style>
